<template>
  <div>
    <div style="height: 100px; width: 100%;">

    </div>

    <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect"
      background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      <el-menu-item index="/home"> 首页 </el-menu-item>
      <el-submenu index="2">
        <template slot="title">文章</template>
        <el-menu-item v-for="item,i in category" :index="'/home/category/'+item.id.toString()" :key="i">{{item.tag}}</el-menu-item>
      </el-submenu>
      <el-menu-item index="/home/leave-message"> 有感而发 </el-menu-item>
      <el-menu-item index="/home/about-me"> 关于我 </el-menu-item>
    </el-menu>

    <el-container>
      <el-main>
        <router-view />
      </el-main>
      <el-aside width="25%">
        <Aside></Aside>
      </el-aside>
    </el-container>

    <div id="copyright">
      <div>
        Copyright © 2021<br />
      </div>
      www.forgirl.top All rights reserved.
      <el-link type="info" href="https://beian.miit.gov.cn/#/Integrated/index">皖ICP备20003130号-1</el-link>
    </div>
  </div>
</template>

<script>
  import Aside from '@/views/aside/index.vue'
  import {
    listTagMsg
  } from '@/api/Label.js'

  export default {
    data() {
      return {
        // 标签组
        category: []
      };
    },

    methods: {
      handleSelect(key, keyPath) {
        this.$router.push(key)
      }
    },

    components: {
      Aside
    },

    mounted() {
      var that = this
      listTagMsg().then(resp => {
        that.category = resp.data
      }).catch(error => {
        console.log(error)
        that.$message.error('加载失败，请稍后重试')
      })
    }

  }
</script>

<style>
  ul {
    opacity: 0.7
  }

  .link_footer {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .el-link.el-link--info {
      color: #2c3e50;
  }
</style>
